<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core">   

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </h:head>

    <h:body>

        <ui:composition>

            <p:dialog closable="true" 
                      showHeader="true" 
                      widgetVar="pn_visualizar_percurso" 
                      resizable="false" 
                      width="1000"
                      maximizable="false" 
                      modal="true" 
                      styleClass="dialog" 
                      appendToBody="false" 
                      position="top">

                <f:facet name="header">
                    Visualização de Percurso da Ambulância
                </f:facet>

                <h:form id="frm_percurso" prependId="false">
                    
                    <p:messages autoUpdate="true" showDetail="false"/>
                    
                    <p:fieldset toggleable="false">
                        <h:panelGrid columns="3">

                            <p:outputLabel for="sorTipoFiltro" value="Filtro: "/>

                            <p:selectOneRadio id="sorTipoFiltro" value="#{controllerVisualizarPercurso.periodo}">
                                <f:selectItem itemValue="1" itemLabel="1 Hora"/>
                                <f:selectItem itemValue="2" itemLabel="6 Horas"/>
                                <f:selectItem itemValue="3" itemLabel="24 Horas"/>
                                <f:selectItem itemValue="4" itemLabel="Por Período"/>
                                <p:ajax event="change" process="@form" listener="#{controllerVisualizarPercurso.limparDatasInicialFinal()}" update="@form"/>
                            </p:selectOneRadio>

                            <p:outputPanel autoUpdate="true">

                                <h:panelGroup id="pgFiltroData" rendered="#{controllerVisualizarPercurso.periodo eq '4'}">
                                    <p:calendar id="dtInicial"
                                                value="#{controllerVisualizarPercurso.dataInicial}"
                                                locale="pt"
                                                pattern="#{msg.formatoPadraoData}"
                                                navigator="true"
                                                mode="popup"
                                                showOn="button"
                                                size="15"
                                                yearRange="c-110:c+10"
                                                onfocus="mascarar(this, '99/99/9999')"
                                                required="true"
                                                requiredMessage="Data Inicial: Campo Obrigatório">
                                        <f:convertDateTime pattern="#{msg.formatoPadraoData}"/>
                                    </p:calendar>
                                    <h:outputText value="À" style="margin-left: 5px; margin-right: 5px"/>
                                    <p:calendar id="dtFinal"
                                                value="#{controllerVisualizarPercurso.dataFinal}"
                                                locale="pt"
                                                pattern="#{msg.formatoPadraoData}"
                                                navigator="true"
                                                mode="popup"
                                                showOn="button"
                                                size="15"
                                                yearRange="c-110:c+10"
                                                onfocus="mascarar(this, '99/99/9999')"
                                                required="true"
                                                requiredMessage="Data Final: Campo Obrigatório">
                                        <f:convertDateTime pattern="#{msg.formatoPadraoData}"/>
                                    </p:calendar>				                                
                                </h:panelGroup>

                            </p:outputPanel>

                        </h:panelGrid>

                        <div align="center">
                            
                            <p:commandButton value="Visualizar Percurso"
                                             process="@form"
                                             action="#{controllerVisualizarPercurso.recuperarHistorico()}"
                                             style="width: 150px"
                                             update="@form"
                                             onclick="painelStatus.show();"
                                             oncomplete="painelStatus.hide();">
                            </p:commandButton>
                            
                        </div>

                    </p:fieldset>

                    <div class="espacamento"/>
                    
                    <p:outputPanel autoUpdate="true">
                        
                        <p:gmap id="map_percurso"
                                center="#{controllerVisualizarPercurso.maiorLatLong}" 
                                zoom="13" 
                                type="ROADMAP"  
                                style="width: 978px; height: 450px" widgetVar="mymap"
                                model="#{controllerVisualizarPercurso.mapModel}"
                                rendered="#{not empty controllerVisualizarPercurso.historicoDadoLido}"
                                />                      
                        
                    </p:outputPanel>

                </h:form>

            </p:dialog>

        </ui:composition>

    </h:body>

</html>
